<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018/10/30
  Time: 8:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<html>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" href="<%=path%>/resources/css/font.css">
    <link rel="stylesheet" href="<%=path%>/resources/css/xadmin.css">
    <script type="text/javascript" src="<%=path%>/resources/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/resources/js/x-layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/resources/js/xadmin.js"></script>
</head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">用户管理</a>
            <a>
              <cite>用户列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:40px">&#xe669;</i></a>
</div>
<div class="x-body">
    <div class="layui-form x-center" style="width:1000px">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="userName" id="userName" placeholder="请输入用户名"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <select id="userState">
                        <option value="">用户状态</option>
                        <option value="停用">停用</option>
                        <option value="启用">启用</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn" data-type="reload" id="check">搜索</button>
                </div>
            </div>
        </div>
    </div>
    <table type="layui-hide" id="userTable" lay-filter="userTable"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="delAll"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('添加用户','<%=path%>/user/addUserHtm',600,400)"><i class="layui-icon"></i>添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    {{#  if(d.userState === '启用'){}}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="停用">停用</a>
    {{#} else { }}
    <a class="layui-btn layui-btn-xs" lay-event="启用">启用</a>
    {{#} }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="updatePwd">修改密码</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="userStateJs">
    {{#  if(d.userState === '启用'){}}
    <span class="layui-btn layui-btn-normal layui-btn-mini">启用</span>
    {{#}else { }}
    <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">停用</span>
    {{#} }}
</script>
<script>
    layui.use([ 'table' , 'element'], function() {
        var table = layui.table
            ,$ = layui.$
            ,element = layui.element; //元素操作

        table.render({
            elem: '#userTable'
            ,id:'userTable'
            ,limit:5
            ,url:"<%=path%>/user/getUserPage"
            ,page: true
            ,toolbar: '#toolbarDemo'
            ,cols: [[
                {type:'checkbox'}
                ,{field:'userName', title: '用户名'}
                ,{field:'userPassword', title: '密码'}
                ,{field:'userPhone', title: '电话'}
                ,{field:'receiveAddress', title: '接收地址'}
                ,{field:'userState', title: '状态',width:100 ,templet: '#userStateJs',sort:true}
                ,{fixed:'right', title:'操作', toolbar: '#barDemo'}
            ]]
        });

        $('#check').click(function(){
            var userName = $('#userName');
            var userState = document.getElementById("userState").value;
            table.reload('userTable', {
                page:{
                    curr:1
                },
                where: {
                    //设定异步数据接口的额外参数，任意设
                    userName:userName.val(),
                    userState:userState
                }
            });
        });
        //监听工具条
        table.on('toolbar(userTable)',function (obj) {
            var data = obj.data;
            if(obj.event == 'delAll'){
                var checkStatus = table.checkStatus('userTable')
                    ,data = checkStatus.data;
                var ids="";
                for(var i=0;i<data.length;i++){
                    ids=ids+data[i].userId+";"
                }
                layer.confirm('确认要删除吗？', function(index) {
                    $.post("<%=path%>/user/delUser?userIds=" + ids, function(data) {
                        if (data == "success") {
                            layer.alert("删除成功!", {icon: 6},function () {
                                window.location="javascript:location.replace(location.href);";
                            });
                        } else {
                            layer.msg('删除失败!', {
                                icon : 1,
                                time : 1000
                            });
                        }
                    });
                });
            }
        })
        table.on('tool(userTable)', function(obj){
            var data = obj.data;
            if(obj.event === '停用'||obj.event === '启用'){
                layer.confirm('确认要'+obj.event+'吗？',function(index){
                    $.post("<%=path%>/user/updateUserState?userId="+data.userId+"&userState="+obj.event,function(data){
                        if(data=="success"){
                            layer.alert(obj.event+"成功!", {icon: 6},function () {
                                window.location="javascript:location.replace(location.href);";
                            });
                        }else{
                            layer.msg(obj.event+'失败!', {
                                icon : 1,
                                time : 1000
                            });
                        }
                    });
                });
            } else if(obj.event == 'del'){
                layer.confirm('确认要删除吗？', function(index) {
                    $.post("<%=path%>/user/delUser?userIds=" + data.userId, function(data) {
                        if (data == "success") {
                            layer.alert("删除成功!", {icon: 6},function () {
                                window.location="javascript:location.replace(location.href);";
                            });
                        } else {
                            layer.msg('删除失败!', {
                                icon : 1,
                                time : 1000
                            });
                        }
                    });
                });
            } else if(obj.event == 'edit'){
                x_admin_show('编辑','<%=path%>/user/updateUserHtm?userId='+data.userId,700,600);
            }
        });
    });

</script>
</body>
</html>
